<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>视频</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>


    <link href="/lib/video-js.css" rel="stylesheet"/>
    <script src="/lib/video.js" type="text/javascript"></script>

    <!-- <link href="http://vjs.zencdn.net/vjs-version/video-js.css" rel="stylesheet"> -->

    <!--<link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>-->
    <!--<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>-->


    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/lib/socket.io.js"></script>
    <script src="/js/app.js"></script>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet"
  href="/lib/animate.min.css">


    <style type="text/css">
  #overlay {
      position: absolute;
      top:5%;
      width:100pt;
      text-align: center;
      font-size: 20px;
      z-index: 2147483647;
    }

    #overlayStat {
        position: absolute;
        top:5%;
        right:0px;
        color: white;
        width:100pt;
        text-align: left;
        font-size: 20px;
        z-index: 2147483647;
    }

      #overlayCountdown {
          position: absolute;
          bottom:30px;
          width:100%;
          text-align: center;
          font-size: 45pt;
          z-index: 2147483649;
      }

    .vjs-default-skin.vjs-paused .vjs-big-play-button
    {
        display: none;
    }
    .text-emotion{
        padding-top:1pt;
        padding-bottom:1pt;
        font-size:20pt;
        color:white;
        font-family: "楷体","楷体_GB2312";
    }


    .div-emotion{
        padding: 8pt;
        height:120pt;
        width:100%;
        font-family: "楷体","楷体_GB2312";
    }


    .div-stat{
        padding: 8pt;
        font-size:20pt;
        width:100%;
        font-family: "楷体","楷体_GB2312";
    }
    .text-stat{
      padding-top:1pt;
      padding-bottom:1pt;
      font-size:22pt;
      color:white;
    }

    #textCountdown{
        font-size:50pt;
        color:white;
        font-family: "楷体","楷体_GB2312";

    }
    </style>



</head>
<body style="background-color: gray">

<br/>

<div id="home" class="container">
    <div class="row" >
    <div class="col-xs-12 text-center">
        <h1 style="color:white;font-family: '楷体','楷体_GB2312';">情绪感应</h1>
        <br/>
    </div>
    </div>
    <div class="row" >
    <div class="col-xs-12">
        <video
            id="video"
            class="video-js vjs-default-skin center-block"
            controls
            width="800" height="500"
            data-setup='{ }'

        >
        </video>

        <!--poster="http://vjs.zencdn.net/v/oceans.png"-->
        
    </div>
    </div>
    <div class="row" >
        <div class="col-xs-4"></div>
    <div class="col-xs-4">
        <br/>
        <!--<button id="startButton" class="btn btn-primary btn-block" style="height:50px;font-size:25px;">开 始-->
            <!--</button>-->
    </div>
        <div class="col-xs-4"></div>
    </div>
</div>


<div id="overlayStat" class="container text-center">

    <div class="row text-center" >
        <div id="divStat1" class="col-xs-12 div-stat">
        </div>
        <div id="textStat1" class="text-stat"></div>
    </div>
    <div class="row text-center" >
        <div id="divStat2" class="col-xs-12 div-stat">
        </div>
        <div id="textStat2" class="text-stat"></div>
    </div>
    <div class="row text-center" >
        <div id="divStat3" class="col-xs-12 div-stat">
        </div>
        <div id="textStat3" class="text-stat"></div>
    </div>
    <div class="row text-center" >
        <div id="divStat4" class="col-xs-12 div-stat">
        </div>
        <div id="textStat4" class="text-stat"></div>
    </div>
    <div class="row text-center" >
        <div id="divStat5" class="col-xs-12 div-stat">
        </div>
        <div id="textStat5" class="text-stat"></div>
    </div>
    <div class="row text-center" >
        <div id="divStat6" class="col-xs-12 div-stat">
        </div>
        <div id="textStat6" class="text-stat"></div>
    </div>
    <div class="row text-center" >
        <div id="divStat7" class="col-xs-12 div-stat">
        </div>
        <div id="textStat7" class="text-stat"></div>
    </div>


</div>


<div id="overlayCountdown" class="container"   >

    <div class="row" >
        <div class="col-xs-12">
            <h2 id="textCountdown" hidden></h2>
        </div>
    </div>
</div>


  <div id="overlay" class="container"  >

      <div class="row" >
          <div class="col-xs-2 div-emotion">
                <div id="div1" >
                    <img id="img1" class="img-circle img-responsive center-block"/>
                    <div id="text1" class="text-emotion text-center"></div>
                </div>
          </div>
      </div>
      <div class="row" >
          <div class="col-xs-2 div-emotion">
                <div id="div2" >
                    <img id="img2" class="img-circle img-responsive center-block"/>
                    <div id="text2" class="text-emotion text-center"></div>
                </div>
          </div>
      </div>
      <div class="row" >
          <div class="col-xs-2 div-emotion">
              <div id="div3" >
                  <img id="img3" class="img-circle img-responsive center-block"/>
                  <div id="text3" class="text-emotion text-center"></div>
              </div>
          </div>
      </div>
      <div class="row" >
          <div class="col-xs-2 div-emotion">
              <div id="div4" >
                  <img id="img4" class="img-circle img-responsive center-block"/>
                  <div id="text4" class="text-emotion text-center"></div>
              </div>
          </div>
      </div>
      <div class="row" >
          <div class="col-xs-2 div-emotion">
              <div id="div5" >
                  <img id="img5" class="img-circle img-responsive center-block"/>
                  <div id="text5" class="text-emotion text-center"></div>
              </div>
          </div>
      </div>


  </div>





<script>



var myPlayer;
var defaultVideo = 'http://p29o6sceb.bkt.clouddn.com/3752Neutral.mp4';

function initStat(stat){
    $('#divStat1').text("惊讶");
    $('#divStat2').text("高兴");
    $('#divStat3').text("平静");
    $('#divStat4').text("伤心");
    $('#divStat5').text("厌恶");
    $('#divStat6').text("生气");
    $('#divStat7').text("害怕");

    $('#textStat1').text(stat.surprise);
    $('#textStat2').text(stat.happiness);
    $('#textStat3').text(stat.neutral);
    $('#textStat4').text(stat.sadness);
    $('#textStat5').text(stat.disgust);
    $('#textStat6').text(stat.anger);
    $('#textStat7').text(stat.fear);
}

var socket =  io.connect(ServerUrl);

socket.on('connect', function() {
    console.log("Client has connected to the server!");
});

socket.on('face', function(data) {
    faceProcess(data);
});

socket.on('mosaic', function(data) {

});

socket.on('disconnect', function() {
    console.log("The client has disconnected!");
});

function sendDisconnect() {
    socket.disconnect();
}


function faceProcess(data) {

    $('#textCountdown').hide();
    console.log(data);


    initStat(data.stat);


    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').hide();
    $('#div5').hide();


    var faces = data.result.faces;
    if(faces.length == 0){

    }
    else if(faces.length > 0)
    {
        var current_surprise_count = 0;
        var current_happiness_count = 0;
        var current_neutral_count = 0;
        var current_sadness_count = 0;
        var current_disgust_count = 0;
        var current_anger_count = 0;
        var current_fear_count = 0;

        var faceCount = faces.length > FaceCount ? FaceCount : faces.length;
        for(var i = 0; i < faceCount; ++i){
            $('#img' + (i+1)).attr('src',ResUrl + faces[i].face_photo);

            var emotion = faces[i].attributes.emotion;
            if(emotion.surprise > 60){
                $('#text' + (i+1)).text("惊讶");
                current_surprise_count += 1;
            }
            else if(emotion.happiness > 60){
                $('#text' + (i+1)).text("高兴");
                current_happiness_count += 1;
            }
            else if(emotion.neutral > 60){
                $('#text' + (i+1)).text("平静");
                current_neutral_count += 1;
            }
            else if(emotion.sadness > 60){
                $('#text' + (i+1)).text("伤心");
                current_sadness_count += 1;
            }
            else if(emotion.disgust > 60){
                $('#text' + (i+1)).text("厌恶");
                current_disgust_count += 1;
            }
            else if(emotion.anger > 60){
                $('#text' + (i+1)).text("生气");
                current_anger_count += 1;
            }
            else if(emotion.fear > 60){
                $('#text' + (i+1)).text("惊恐");
                current_fear_count += 1;
            }else{
                $('#text' + (i+1)).text("平静");
                current_neutral_count += 1;
            }
//comment temp
//            $('#div' + (i+1)).show();
//
//            $('#div' + (i+1)).removeClass('animated fadeOutLeft');
//            $('#div' + (i+1)).addClass('animated fadeInLeft');
        }

        setTimeout(function (){
            if(this.faceCount > 0){
                for(var i = 0; i < faceCount; ++i){
                    $('#div' + (i+1)).removeClass('animated fadeInLeft');
                    $('#div' + (i+1)).addClass('animated fadeOutLeft');
                }

//                    $('#div1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function (){
//                        $('#div1').hide();
//                    });

            }
        }.bind({faceCount:faceCount}),5000);


        if(current_neutral_count >= 1 &&
            current_surprise_count == 0 &&
            current_happiness_count == 0 &&
            current_sadness_count == 0 &&
            current_disgust_count == 0 &&
            current_anger_count == 0 &&
            current_fear_count == 0
        ){
            myPlayer.src({
                type: 'video/mp4',
                src: 'http://p29o6sceb.bkt.clouddn.com/117Neutral2.mp4'//http://localhost:8080/video/1.mp4'
            });
            myPlayer.play();
            myPlayer.enterFullScreen();
        }
        else if(

            current_neutral_count == 0 &&
            current_surprise_count == 0 &&
            current_happiness_count >= 1 &&
            current_sadness_count == 0 &&
            current_disgust_count == 0 &&
            current_anger_count == 0 &&
            current_fear_count == 0
        ){
            myPlayer.src({
                type: 'video/mp4',
                src: 'http://p29o6sceb.bkt.clouddn.com/117Happy.mp4'
            });
            myPlayer.play();
            myPlayer.enterFullScreen();
        }
        else if(
            current_neutral_count == 0 &&
            current_surprise_count == 0 &&
            current_happiness_count == 0 &&
            current_sadness_count >= 1 &&
            current_disgust_count == 0 &&
            current_anger_count == 0 &&
            current_fear_count == 0
        ){
            myPlayer.src({
                type: 'video/mp4',
                src: 'http://p29o6sceb.bkt.clouddn.com/117Sad.mp4'
            });
            myPlayer.play();
            myPlayer.enterFullScreen();
        }
        else if(
            current_neutral_count == 0 &&
            current_surprise_count >= 1 &&
            current_happiness_count == 0 &&
            current_sadness_count == 0 &&
            current_disgust_count == 0 &&
            current_anger_count == 0 &&
            current_fear_count == 0
        ){
            myPlayer.src({
                type: 'video/mp4',
                src: 'http://p29o6sceb.bkt.clouddn.com/117Surprise.mp4'
            });
            myPlayer.play();
            myPlayer.enterFullScreen();
        }


        else {
            myPlayer.src({
                type: 'video/mp4',
                src: 'http://p29o6sceb.bkt.clouddn.com/her2.mp4'//'http://p29o6sceb.bkt.clouddn.com/3752Crazy.mp4'
            });
            myPlayer.play();
            myPlayer.enterFullScreen();
        }

    }
};




(function ($) {
        $(document).ready(function () {
            // An example of playing with the Video.js javascript API
            // Will start the video and then switch the source 3 seconds latter
            // You can look at the doc there: http://docs.videojs.com/docs/guides/api.html
            videojs('video').ready(function () {
                myPlayer = this;
                
                myPlayer.on('play', function () {
                    console.log('开始/恢复播放');
                });
                myPlayer.on('pause', function () {
                    console.log('暂停播放');
                });
                myPlayer.on('ended', function () {
                    console.log('结束播放');

                    socket.emit('play-finish', {});

                    myPlayer.src({
                        type: 'video/mp4',
                        src: defaultVideo//http://localhost:8080/video/1.mp4'
                    });
                    myPlayer.play();
                });


                myPlayer.src({type: 'video/mp4', src: defaultVideo});
                myPlayer.play();

            });

        });
    })(jQuery);


    var overlay= document.getElementById('overlay');
    var video= document.getElementById('video');
      video.addEventListener('progress', function() {
        var show= video.currentTime>=5 && video.currentTime<10;
        //overlay.style.visibility= show? 'visible' : 'visible';
      }, false);




</script>
</body>
</html>